<template>
    <div class="product-table">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>退款编号：340201907201242</span>
            </div>
            <el-table
                    :data="tableData"
                    :span-method="objectSpanMethod"
                    border
                    center="true"
                    style="width: 100%; ">
                <el-table-column
                        prop="id"
                        label="订单编号"
                        align="center"
                        width="180">
                </el-table-column>

                <el-table-column
                        prop="name"
                        align="center"
                        label="子单号">
                </el-table-column>
                <el-table-column
                        prop="amount1"
                        label="商品信息"
                        align="center"
                        width="230">
                    <template slot-scope="scope">
                        <div style="width: 60px; height: 60px;">
                            <img :src="scope.row.amount1" width="60" height="60" class="head_pic"/>
                        </div>
                        <div style="margin-left: 20px; height: 70px; overflow: hidden;">
                            {{scope.row.product_intro}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="amount2"
                        align="center"
                        label="数量">

                </el-table-column>
                <el-table-column
                        prop="amount3"
                        align="center"
                        label="商品金额">
                </el-table-column>
                <el-table-column
                        prop="amount3"
                        label="支付方式"
                        align="center">
                    <template scope="scope">
                        {{scope.row.amount3|formatpaytype}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="amount3"
                        align="center"
                        label="订单金额">
                </el-table-column>
                <el-table-column
                        prop="amount3"
                        align="center"
                        label="优惠金额">
                </el-table-column>

            </el-table>
        </el-card>

        <el-card style="margin-top: 10px;">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="退货类型">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="是否退货">
                    <el-radio-group v-model="form.resource">
                        <el-radio label="是"></el-radio>
                        <el-radio label="否"></el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item
                        label="寄回单号"
                        prop="age"
                        label-width="90px"
                        :rules="[{ required: true, message: '单号不能为空'},
                                    { type: 'number', message: '单号必须为数字值'}]">
                    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"
                              style="width: 200px;"></el-input>
                </el-form-item>

                <el-form-item label="问题描述">
                    <div style="margin-left: 5px;">
                        产品不合格
                    </div>
                </el-form-item>

                <el-form-item label="上传图片">
                    <img src="https://img.alicdn.com/imgextra/i4/282179432/O1CN01CEbqdb2JXuEfgbqX0_!!282179432.jpg_80x80.jpg"
                         alt="">
                    <img src="https://img.alicdn.com/imgextra/i4/282179432/O1CN01CEbqdb2JXuEfgbqX0_!!282179432.jpg_80x80.jpg"
                         alt="">
                </el-form-item>

                <el-form-item label="退款账号">
                    支付宝：1050764423@qq.com
                </el-form-item>

                <el-form-item label="审核不通过原因" label-width="120px">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>

    export default {
        filters: {
            formatpaytype(e) {
                if (e == 1) {
                    return '支付宝'
                } else if (e === 2) {
                    return '微信'
                }
            }
        },
        data() {
            return {
                tableData: [{
                    id: '12987122',
                    name: '12987122-1',
                    amount1: 'https://img.alicdn.com/imgextra/i4/282179432/O1CN01CEbqdb2JXuEfgbqX0_!!282179432.jpg_80x80.jpg',
                    product_intro: '夏季卡通小猫印花短袖T恤男士加大码潮流胖子宽松休闲情侣装夏装 [交易快照]',
                    amount2: '3.2',
                    amount3: 1
                }, {
                    id: '12987123',
                    name: '12987122-2',
                    amount1: 'https://img.alicdn.com/imgextra/i2/472963133/O1CN01vrd7981Z0xPbCC9Jb_!!0-item_pic.jpg_80x80.jpg',
                    product_intro: '夏季卡通小猫印花短袖T恤男士加大码潮流胖子宽松休闲情侣装夏装 [交易快照]',
                    amount2: '4.43',
                    amount3: 2
                }],
                list: [0, 4, 5, 6, 7],
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                numberValidateForm: {
                    age: ''
                }
            };
        },
        methods: {

            objectSpanMethod({row, column, rowIndex, columnIndex}) {
                for (let i = 0; i < this.list.length; i++) {
                    if (columnIndex === this.list[i]) {
                        if (rowIndex === 0) {
                            return {
                                rowspan: 2,
                                colspan: 1
                            };
                        } else {
                            return {
                                rowspan: 0,
                                colspan: 1
                            };
                        }
                    }
                }

            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    };
</script>

<style lang="scss">

    .product-table .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #fff !important;
    }

    .product-table .cell {
        display: flex;
        justify-content: center;
    }

</style>